<html>
<link rel="stylesheet" type="text/css" media="screen" href="${resource(dir:'css', file:'jquery-ui-1.7.2.custom.css')}" />
<link rel="stylesheet" type="text/css" media="screen" href="${resource(dir:'css', file:'ui.jqgrid.css')}" />
<style>
html, body {
	margin: 0;			/* Remove body margin/padding */
	padding: 0;
	overflow: hidden;	/* Remove scroll bars on browser window */	
    font-size: 75%;
}
/*Splitter style */


#LeftPane {
	/* optional, initial splitbar position */
	overflow: auto;
}
/*
 * Right-side element of the splitter.
*/

#RightPane {
	padding: 2px;
	overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
</style>

<script src="${resource(dir:'js/jquery',file:'jquery-1.3.2.min.js')}" type="text/javascript"></script>
<script src="${resource(dir:'js/jqGrid',file:'jquery-ui-1.7.2.custom.min.js')}" type="text/javascript"></script>
<script src="${resource(dir:'js/jqGrid',file:'jquery.layout.js')}" type="text/javascript"></script>
<script src="${resource(dir:'js/jqGrid/i18n',file:'grid.locale-en.js')}" type="text/javascript"></script>
<script src="${resource(dir:'js/jqGrid',file:'jquery.jqGrid.min.js')}" type="text/javascript"></script>
<script src="${resource(dir:'js/jqGrid',file:'jquery.tablednd.js')}" type="text/javascript"></script>
<script src="${resource(dir:'js/jqGrid',file:'jquery.contextmenu.js')}" type="text/javascript"></script>
<script src="${resource(dir:'js/public',file:'public.js')}" type="text/javascript"></script>



        <div class="body" id="dummy_Parent_root">
			<g:if test="${flash.message}">
			<div class="message">${flash.message}</div>
			</g:if>
			<fieldset>
			<legend>123</legend>
			<div> Name <input type="text" id="item_name" onkeydown="doSearch(arguments[0]||event)" /> 
				<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)">
				允许自动搜索 <br/>
			</div>
			<div> Name2<br>  
				<input type="text" id="item_name2" onkeydown="doSearch(arguments[0]||event)" />
			</div>
	
			<div id='dummy_Parent_buttons' class="buttons" align="right">
                <input  id="submitButton" name="2" type="button" value="查询" class="formbutton" />
                <input type="reset" value="重置" class="formbutton" />
               	<input  id="button_create" type="button" value="新建" class="formbutton" name="1" />
               	<input  id="button_edit" type="button" value="修改" class="formbutton" name="3" />
                <input  id="button_view" type="button" value="详细" class="formbutton" name="5"/>
                <input  id="button_delete" type="button" value="删除" class="formbutton" name="4"/>
            </div>
		</fieldset>
			<div id="dummy_Parent_dialog">
				<form id="dummy_Parent_dailog_form">
				<input type="hidden" id="id" value=""/>
				<input type="hidden" id="action" value=""/>
				<p id="dummy_Parent_validateTips"></p>
					 <table>
                        <tbody>
                        
                            <tr class="prop">
                                <td valign="top" class="name" width="18%">
                                    <label for="name">Name:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name','errors')}" width="32%">
                                    <input type="text" id="name" name="name" value=""/>
                                </td>
						
                                <td valign="top" class="name" width="18%">
                                    <label for="name10">Name10:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name10','errors')}" width="32%">
                                    <input type="text" id="name10" name="name10" value="${fieldValue(bean:dummyParentInstance,field:'name10')}"/>
                                </td>
                            </tr> 
                        
                            <tr class="prop">
                                <td valign="top" class="name" width="18%">
                                    <label for="name2">Name2:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name2','errors')}" width="32%">
                                    <input type="text" id="name2" name="name2" value="${fieldValue(bean:dummyParentInstance,field:'name2')}"/>
                                </td>
						
                                <td valign="top" class="name" width="18%">
                                    <label for="name3">Name3:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name3','errors')}" width="32%">
                                    <input type="text" id="name3" name="name3" value="${fieldValue(bean:dummyParentInstance,field:'name3')}"/>
                                </td>
                            </tr> 
                        
                            <tr class="prop">
                                <td valign="top" class="name" width="18%">
                                    <label for="name4">Name4:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name4','errors')}" width="32%">
                                    <input type="text" id="name4" name="name4" value="${fieldValue(bean:dummyParentInstance,field:'name4')}"/>
                                </td>
						
                                <td valign="top" class="name" width="18%">
                                    <label for="name5">Name5:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name5','errors')}" width="32%">
                                    <input type="text" id="name5" name="name5" value="${fieldValue(bean:dummyParentInstance,field:'name5')}"/>
                                </td>
                            </tr> 
                        
                            <tr class="prop">
                                <td valign="top" class="name" width="18%">
                                    <label for="name6">Name6:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name6','errors')}" width="32%">
                                    <input type="text" id="name6" name="name6" value="${fieldValue(bean:dummyParentInstance,field:'name6')}"/>
                                </td>
						
                                <td valign="top" class="name" width="18%">
                                    <label for="name7">Name7:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name7','errors')}" width="32%">
                                    <input type="text" id="name7" name="name7" value="${fieldValue(bean:dummyParentInstance,field:'name7')}"/>
                                </td>
                            </tr> 
                        
                            <tr class="prop">
                                <td valign="top" class="name" width="18%">
                                    <label for="name8">Name8:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name8','errors')}" width="32%">
                                    <input type="text" id="name8" name="name8" value="${fieldValue(bean:dummyParentInstance,field:'name8')}"/>
                                </td>
						
                                <td valign="top" class="name" width="18%">
                                    <label for="name9">Name9:</label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean:dummyParentInstance,field:'name9','errors')}" width="32%">
                                    <input type="text" id="name9" name="name9" value="23232323"/>
                                </td>
                             
                            </tr> 
                       		
                       		
                        </tbody>
                    </table>
				</form>


			</div>
			
			<div id="list">
			<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table> 
			<div id="pager2" class="scroll" style="text-align:center;"></div> 
			
			
			
			<script type="text/javascript"><!--
		jQuery(document).ready(function(){
		
		    /* 
			jQuery('#button_create','#button_edit').click(function() {alert('123')});
			*/
			
			$("#dummy_Parent_dialog").dialog({
				title: '创建***',
				bgiframe: true,
				autoOpen: false,
				height: 300,
				width:600,
				position:'top',
				modal: true,
				buttons: {
					'Save': function() {
						var bValid = true;
						var params ;
						var id=$('#dummy_Parent_dailog_form #id').val();
						var action=$('#dummy_Parent_dailog_form #action').val();
						params= $('#dummy_Parent_dailog_form').serialize()+'&id='+id;
						allFields.removeClass('ui-state-error');
						/*
						bValid = bValid && checkLength(password,"password",5,16);
						bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
						*/
						if (bValid) {
							//ajax save
							if(action=='c'){
								jQuery.post('dummyParent/save',params,function(s){});
							}
							if(action=='u')
								jQuery.post('dummyParent/update',params,function(s){});
							if(action=='v')
								$(this).dialog('close');
							$(this).dialog('close');
							gridReload();
						}
					},
					'Cancel': function() {
						$(this).dialog('close');
					}
				},
				close: function() {
					allFields.val('').removeClass('ui-state-error');
				}
			});
			//open
			
			allFields=$('#dummy_Parent_dailog_form input');
			allFields.val();
			//$(allFields).each(function(){alert($(this).attr('id'));});
			tips = $("#dummy_Parent_validateTips");
			//button click	
		    jQuery('#dummy_Parent_buttons :button').click(function(){
				var index=0;
				index=parseInt($(this).attr('name'));
			
				switch(index)
				{
				//create
				case 1:
					$('#dummy_Parent_dailog_form #id').val();
					$('#dummy_Parent_dailog_form #action').val('c');
					$('#dummy_Parent_dialog').dialog('option', 'title', '新建');
					$('#dummy_Parent_dialog').dialog('open');
					
				break;
				//inquery
				case 2:
					gridReload();
				break;
				//update
				case 3:
					//$('#dummy_Parent_dailog_form #id').val(1);
					$('#dummy_Parent_dailog_form #action').val('u');
					$('#dummy_Parent_dialog').dialog('option', 'title', '编辑');
					doShow();
					$('#dummy_Parent_dialog').dialog('open');
				break;
				//delete
				case 4: 
					if(confirm('确定删除数据？'))
					{
						
						jQuery.post('dummyParent/delete',{id:$('#dummy_Parent_dailog_form #id').val()},function(s){
								
								if(s){
									alert("删除成功！");
									gridReload();	
									}
								else
									{alert("删除失败！");}
									
							});	
					}
					
				break;
				//view
				case 5:
					$('#dummy_Parent_dailog_form #action').val('v');
					$('#dummy_Parent_dialog').dialog('option', 'title', '查看');
					doShow();
					$('#dummy_Parent_dialog').dialog('open');
					
				break;	
				default:
					alert('default');
				break;
				};
		    }).hover(
					function(){ 
						$(this).addClass("ui-state-hover"); 
					},
					function(){ 
						$(this).removeClass("ui-state-hover"); 
					}
				).mousedown(function(){
					$(this).addClass("ui-state-active"); 
				})
				.mouseup(function(){
						$(this).removeClass("ui-state-active");
				});
		function doShow()
			{
			     jQuery.post('dummyParent/show',{id:$('#dummy_Parent_dailog_form #id').val()},function(json){
						
						$('#dummy_Parent_dailog_form #name').val(json.name);
						$('#dummy_Parent_dailog_form #name2').val(json.name2);
						$('#dummy_Parent_dailog_form #name3').val(json.name3);
						$('#dummy_Parent_dailog_form #name4').val(json.name4);
						$('#dummy_Parent_dailog_form #name5').val(json.name5);
						$('#dummy_Parent_dailog_form #name6').val(json.name6);
						$('#dummy_Parent_dailog_form #name7').val(json.name7);
						$('#dummy_Parent_dailog_form #name8').val(json.name8);
						$('#dummy_Parent_dailog_form #name9').val(json.name9);
			    	     },'json');
			};
	//List 
	jQuery("#list2").jqGrid({
				url: 'dummParent/jsonList',
				//width:1200,
				datatype:"json",
				colNames:['id', 'name','name2', 'name3'],
				colModel:[
						{name:'id',index:'id', width:55, sortable:true,hidden:true},
						{name:'name',index:'name', width:90, sortable:true},
						{name:'name2',index:'name2', width:100, sortable:true},
						{name:'name3',index:'name3', width:800, sortable:true}
						],
				rowNum:10,
				rowList:[10,20,50],
				height:300,
				autowidth: true,
				rownumbers: true,
				imgpath: "${resource(dir:'js/images', file:'')}",
				pager: jQuery('#pager2'), 
				sortorder: 'asc',
				sortname: 'name',
				viewrecords: true,
				caption:"查询结果",
				onSelectRow:function(id){
								
								//var rd=jQuery("#list2").jqGrid('getRowData',id);
							    var rd=jQuery('#list2').getRowData(id); 
								//alert("rowid :"+id+"\n"+"datadid :"+rd.id);
								$('#dummy_Parent_dailog_form #id').val(rd.id);
				}
				
				}).navGrid('#pager2',{edit:false,add:true,del:false});		
			});
				var timeoutHnd;
				var flAuto = false;
				function doSearch(ev){
					if(!flAuto)
						return;
					// var elem = ev.target||ev.srcElement;
					if(timeoutHnd)
						clearTimeout(timeoutHnd);
					timeoutHnd = setTimeout(gridReload,500);
				}
				function gridReload(){
					var name_mask = jQuery("#item_name").val();
					var name2_mask = jQuery("#item_name2").val();
					jQuery("#list2").setGridParam({url:"dummyParent/jsonList?name_mask="+name_mask+"&name2_mask="+name2_mask,page:1}).trigger("reloadGrid");
				}
				function enableAutosubmit(state){
					flAuto = state;
					jQuery("#submitButton").attr("disabled",state);
				}

				jQuery("#a1").click( function(){
					var id = jQuery("#list2").jqGrid('getGridParam','selrow');
					if (id)	{
						var ret = jQuery("#list2").jqGrid('getRowData',id);
						alert(ret+"id="+ret.id+" invdate="+ret.name+"...");
						
					} else { alert("Please select row");}
				});
							
			--></script>
			
			</div>
             
        </div>
</html>
